// 提供的数据
const obj = {
  success: true,
  code: 10000,
  data: [
    {
      id: 1,
      username: '管理员',
      workNumber: '10000',
      time: '2022-10-24',
    },
    {
      id: 2,
      username: '孙财',
      workNumber: '10001',
      time: '2022-09-24',
    },
    {
      id: 3,
      username: '罗晓晓',
      workNumber: '10002',
      time: '2022-08-24',
    },
    {
      id: 4,
      username: '文吉星',
      workNumber: '10003',
      time: '2022-08-25',
    },
    {
      id: 5,
      username: '巴思慧',
      workNumber: '10004',
      time: '2022-08-24',
    },
    {
      id: 6,
      username: '乔海',
      workNumber: '10005',
      time: '2022-08-22',
    },
    {
      id: 7,
      username: '董昊空',
      workNumber: '10006',
      time: '2022-08-24',
    },
    {
      id: 8,
      username: '周乐天',
      workNumber: '10007',
      time: '2022-07-24',
    },
    {
      id: 9,
      username: '吕勇锐',
      workNumber: '10008',
      time: '2022-08-17',
    },
    {
      id: 10,
      username: '袁永安',
      workNumber: '10009',
      time: '2022-08-24',
    },
  ],
  message: '获取员工列表成功',
}
let { data } = obj
// console.log(data)
// console.log(data.sort((a, b) => b.workNumber - a.workNumber))

const tbody = document.querySelector('#tbody')
// todo 渲染功能
function render() {
  tbody.innerHTML = data.sort((a, b) => b.workNumber - a.workNumber).map((item, index) => {
    const { id, username, workNumber, time } = item
    return `
      <tr class="el-table__row">
        <td class="is-center">
          <div class="cell"><span class="username">${username.slice(0, 1)}</span></div>
        </td>
        <td>
          <div class="cell">${username}</div>
        </td>
        <td>
          <div class="cell">${workNumber}</div>
        </td>
        <td>
          <div class="cell">${time}</div>
        </td>
        <td>
          <div class="cell">
            <button type="button" class="el-button hm-text btn-edit" data-id=${id}>编辑</button>
            <button type="button" class="el-button hm-text btn-del" data-id=${id}>删除</button>
          </div>
        </td>
      </tr>
  `
  }).join('')
}
render()
// 添加和编辑都是弹框, 然后让用户输入或修改, 用到的是一个对话框
// 问题: 如何判断是添加或编辑的对话框 ?
// 解决: 定义一个变量, 来存储 添加 或 编辑的标识, 后期通过判断标识, 来出来添加 或 编辑业务
let rowId

const delOK = document.querySelector('#del-ok')
const modalDel = document.querySelector('#modal-del')
const title = document.querySelector('#my-dialog-title')
const username = document.querySelector('.el-input .username')
const time = document.querySelector('.time')
const workNumber = document.querySelector('.workNumber')
const btnOK = document.querySelector('#btn-ok')
const add = document.querySelector('#btn-add')
const modal = document.querySelector('#modal')
const dialog = new A11yDialog(modal)
const dialogDel = new A11yDialog(modalDel)
// 添加功能
add.addEventListener('click', function () {
  // 给变量赋值,作为添加的标识
  rowId = null
  // 显示对话框
  dialog.show()

  // 拿到最后一个入职员工的工号, 加1给新员工, 并显示到对话框中
  workNumber.value = +data[0].workNumber + 1
})


tbody.addEventListener('click', function (e) {
  // 编辑业务
  // 判断点击的目标元素
  if (e.target.classList.contains('btn-edit')) {

    // 给变量赋值,作为编辑的标识 -> 因为点击编辑要回显数据 -> 怎么回显数据 -> 根据id拿到当前点击的数据
    // 所以我们rowId中, 会存储当前点击数据的id
    rowId = e.target.dataset.id
    // 回显业务 -> 点击某条数据,拿到此数据 -> 数据在哪里(data数组中) -> 到data数组中找到点击的数据
    // console.log(typeof rowId) // 10 9 8 7....
    const info = data.find(item => item.id === +rowId)
    // console.log(res) {id: 8, username: '周乐天', workNumber: '10007', time: '2022-07-24'}
    // input表单可以通过value获取值, 也可以设置值
    username.value = info.username
    workNumber.value = info.workNumber
    time.value = info.time

    // 显示对话框
    dialog.show()
  }

  // 删除业务 
  // 判断点击的目标元素 
  if (e.target.classList.contains('btn-del')) {
    rowId = e.target.dataset.id
    // 显示删除的对话框
    dialogDel.show()
  }
})

// 点击确定按钮 要处理的业务
btnOK.addEventListener('click', function () {
  if (rowId) {
    // 编辑业务 -> 拿到用户最新的编辑的数据, 给data数组中对应的对象
    // let obj = {
    //   username: '袁永安'
    // }
    // obj.username = username.value
    // console.log(obj.username) // 袁永安111
    // console.log(username.value) // 袁永安111
    const itemInfo = data.find(item => item.id === +rowId)
    // console.log(itemInfo)
    itemInfo.username = username.value
    itemInfo.workNumber = workNumber.value
    itemInfo.time = time.value
  } else {
    // 添加业务
    data.unshift({
      id: +new Date(),
      username: username.value,
      workNumber: workNumber.value,
      time: time.value,
    })
  }
  // 重新渲染
  render()
  // 隐藏对话
  dialog.hide()
})


// 当隐藏对话框时,要清空用户输入的内容
dialog.on('hide', () => {
  username.value = ''
  workNumber.value = ''
  time.value = ''
})

// 根据点击的是添加还是编辑, 来展示不同的标题
// 监听对话框是否显示 -> 根据rowid来判断是谁点击的 -> 显示不同的内容
dialog.on('show', () => {
  title.innerHTML = rowId ? '编辑员工信息' : '添加员工信息'
})

// 点击按钮 删除数据
delOK.addEventListener('click', function () {
  console.log(rowId)
  // rowId -> 10
  // item.id -> 10 9 .... 1
  data = data.filter(item => item.id !== +rowId)
  render()
  // 隐藏删除对话框
  dialogDel.hide()

  myAlter('删除成功')
})
